<template>
  <div class="mui-content mui-fullscreen">
    <!-- <header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <h1 class="mui-title">付款</h1>
    </header>-->
    <div class="mui-content-padded">
      <div class="mui-segmented-control">
        <a class="mui-control-item mui-active" href="#item1">到店自提</a>
        <a class="mui-control-item" href="#item2">商家配送</a>
      </div>
    </div>
    <div id="item1" class="mui-control-content mui-active">
      <div class="mui-scroll bgh">
        <form class="mui-input-group">
          <div class="mui-input-row">
            <label class="fs14">提货人：</label>
            <input type="text" class="fs14" placeholder="请填写收货人姓名" v-model="getname" />
          </div>
          <div class="mui-input-row">
            <label class="fs14">手机号码：</label>
            <input type="number" class="fs14" placeholder="请填写手机号码" v-model="gettel" />
          </div>
          <div class="mui-input-row">
            <label class="fs14">商家地址：</label>
            <input
              class="fs14"
              @click="goto"
              readonly="readonly"
              type="text"
              placeholder="请选择商家地址"
              v-model="goIng"
            />
          </div>
          <div class="mui-input-row">
            <label class="fs14">商家电话：</label>
            <input type="number" class="fs14" placeholder="请填写手机号码" v-model="getbusintel" readonly />
          </div>
        </form>
        <detaillist :detaillists="carlist"></detaillist>
        <div style="height:50px"></div>
        <div class="cart-bottom bgf">
          <span style="display:inline-block;width:50%;text-align:right;line-height:40px">
            合计:
            <span class="colc">￥{{detaillists.amount}}</span>
          </span>

          <button
            id="ziti"
            style="border-radius:0;height:40px;width:100px;border:none;background:rgb(0, 178, 163);color:#fff;float:right"
            @click="orderCarAdd(1)"
          >支付</button>
        </div>
      </div>
    </div>
    <div id="item2" class="mui-control-content bgh">
      <form class="mui-input-group">
        <div class="mui-input-row">
          <label class="fs14">收件人：</label>
          <input type="text" class="fs14" v-model="fname" placeholder="请填写收货人姓名" />
        </div>
        <div class="mui-input-row">
          <label class="fs14">手机号码：</label>
          <input type="number" class="fs14" v-model="ftel" placeholder="请填写手机号码" />
        </div>
        <div class="mui-input-row" style="position: relative">
          <label class="fs14">地址：</label>
          <input class="fs14" type="text" placeholder="请选择收货地址" v-model="goIng2" />
          <i @click="goto2" style="position: absolute;width: 20px;right:15px;top: 10px;color:#aaa">></i>
          />
        </div>
      </form>
      <detaillist :detaillists="carlist"></detaillist>
      <div class="detail-ps" style="border-bottom:1px solid #ddd">
        <span>配送方式：</span>
        <span style="display: inline-block;float: right;color: #aaa;">普通快递</span>
      </div>
      <div class="detail-ps">
        <span>运费：</span>
        <span style="display: inline-block;float: right;color: #aaa;">￥{{yunfei}}</span>
      </div>
      <div style="height:50px"></div>
      <div class="cart-bottom bgf">
        <span style="display:inline-block;width:50%;text-align:right;line-height:40px">
          合计:
          <span class="colc">￥{{zongjia}}</span>
        </span>

        <button
          id="kuaidi"
          style="border-radius:0;height:40px;width:100px;border:none;background:rgb(0, 178, 163);color:#fff;float:right"
          @click="orderCarAdd(0)"
        >支付</button>
      </div>
    </div>
  </div>
</template>


<script>
import detaillist from '~/components/list/detaillist.vue'
import detailfoter from '~/components/list/detailfoter.vue'

export default {
  layout: 'default2',
  components: {
    detaillist,
    detailfoter
  },
  data() {
    return {
      ftel: '',
      fname: '',
      goIng: '',
      goIng2: '',
      prepayid: {},
      ts: this.newStore(),
      toal: 0,
      getname: '',
      gettel: '',
      zongjia: 0,
      getbusintel: '',
      detaillists: {},
      carlist: [],
      setData2: [],
      setData: [
        { value: 'aaa', text: '天津市南开区王顶堤1101号' },
        { value: 'bbb', text: '天津市南开区王顶堤1102号' },
        { value: 'ccc', text: '天津市南开区王顶堤1103号' }
      ]
    }
  },
  created() {
    this.getcartlist()
  },
  computed: {
    activePath() {
      return this.$route.name
    }
  },
  mounted() {
    console.log('44', new mui.PopPicker())
  },
  methods: {
    //拿数据
    getAddress() {
      const res = {
        token: localStorage.getItem('token')
      }
    },
    //获取购物车列表
    getcartlist() {
      const res = {
        token: localStorage.getItem('token'),
        carid: this.$route.query.carid
      }
      this.spost(this.ts, '/orderc/orderCarDetail', res).then(ts => {
        if (ts.d.flag == '200') {
          this.detaillists = ts.d.data
          this.zongjia = parseFloat(
            ts.d.data.yunfei + ts.d.data.amount
          ).toFixed(2)
          // console.log(this.zongjia);
          this.carlist = ts.d.data.carlist
          this.getbusintel = ts.d.data.shopaddress.stel
          this.goIng = ts.d.data.shopaddress.saddr
          this.fname = ts.d.data.address.addressee
          this.ftel = ts.d.data.address.tel
          this.goIng2 = ts.d.data.address.address
          this.toal = ts.d.data
          this.yunfei = ts.d.data.yunfei
          console.log(ts.d.data, '0900')
        } else if (ts.d.flag == '400') {
          mui.alert(ts.d.message, '提示', () => {
            this.$router.push({
              name: 'fcard'
            })
          })
        }
      })
    },
    goPage(pathname) {
      this.$router.push({ name: pathname })
    },
    goto() {
      const res = {
        token: localStorage.getItem('token'),
        mailtype: '1'
      }
      this.spost(this.ts, '/orderc/getAddress', res).then(ts => {
        if (ts.d.flag == '200') {
          this.setData = ts.d.data
          let a = []
          for (let i = 0; i < this.setData.length; i++) {
            a.push({ value: this.setData[i].stel, text: this.setData[i].saddr })
          }

          console.log(a, '2235')

          let goto = new mui.PopPicker({
            //通过new mui.PopPicker()初始化popPicker组件
            layer: 1 //显示列数
          })
          goto.setData(a) //setData() 支持数据格式为: 数组
          goto.show(e => {
            //e 就是总数据的数组 显示picker
            this.goIng = e[0].text
            this.getbusintel = e[0].value
            console.log(e[0].stel, '33333r')

            //  console.log(self.goIng)
          })
        }
      })
    },
    goto2() {
      const res = {
        token: localStorage.getItem('token'),
        mailtype: '0'
      }
      this.spost(this.ts, '/orderc/getAddress', res).then(ts => {
        if (ts.d.flag == '200') {
          this.setData2 = ts.d.data
          let b = []
          for (let i = 0; i < this.setData2.length; i++) {
            b.push({
              // value: this.setData2[i].address,
              text: this.setData2[i].address,
              value: this.setData2[i].tel,
              value1: this.setData2[i].addressee
            })
          }
          console.log(b, '4567')

          let goto2 = new mui.PopPicker({
            //通过new mui.PopPicker()初始化popPicker组件
            layer: 1 //显示列数
          })
          goto2.setData(b) //setData() 支持数据格式为: 数组
          goto2.show(e => {
            //e 就是总数据的数组 显示picker
            this.goIng2 = e[0].text
            this.fname = e[0].value1
            this.ftel = e[0].value
            //  console.log(self.goIng)
          })
        }
      })
    },
    //支付
    orderCarAdd(e) {
      // console.log(this.getname, '2222')
      // console.log(this.gettel, '22222')
      // console.log(e, '22222')
      if (e == 0) {
        //商家配送

        this.getname = this.fname
        this.gettel = this.ftel
        console.log(this.getname, '43')
        if (this.fname == '' || undefined) {
          mui.toast('请输入收件人姓名')
          return
        }
        if (this.ftel == '' || undefined) {
          mui.toast('请输入手机号码')
          return
        }
        if (!/^1[3456789]\d{9}$/.test(this.ftel)) {
          this.gettel = ''
          mui.toast('手机号码有误，请重填')
          return
        }
        if (this.goIng2 == '' || undefined) {
          mui.toast('请输入地址')
        }
      } else if (e == 1) {
        //到店自提
        console.log('wer')
        console.log(this.getname, 'wer')
        if (this.getname == '' || undefined) {
          mui.toast('请输入提货人姓名')
          return
        }
        if (this.gettel == '' || undefined) {
          mui.toast('请输入手机号码1')
          return
        }
        if (!/^1[3456789]\d{9}$/.test(this.gettel)) {
          this.gettel = ''
          mui.toast('手机号码有误，请重填')
          return
        }
      }
      const res = {
        token: localStorage.getItem('token'),
        carid: this.$route.query.carid,
        mailtype: e, //发送方式是0还是1
        addressee: this.getname, //收件人  需要判断
        tel: this.gettel, //电话  需要判断
        stel: this.getbusintel, //商家电话
        saddr: this.goIng, //商家地址
        address: this.goIng2, //地址

        ordertoken: this.toal.ordertoken,
        orderno: this.toal.orderno
      }
      this.spost(this.ts, '/Orderc/orderCarAdd', res).then(ts => {
        if ((ts.d.flag = '200')) {
          this.prepayid = ts.d.data
          this.PayMoney()
        } else {
          mui.toast(ts.d.message)
        }
      })
    },
    //立即支付调用微信接口，生产环境使用
    PayMoney() {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener(
            'WeixinJSBridgeReady',
            this.onBridgeReady,
            false
          )
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
        }
      } else {
        this.onBridgeReady()
      }
    },
    onBridgeReady() {
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
          timeStamp: `${this.prepayid.timeStamp}`, // 时间戳，自1970年以来的秒数
          appId: `${this.prepayid.appId}`, // 公众号名称，由商户传入
          nonceStr: `${this.prepayid.nonceStr}`, // 随机串
          package: `${this.prepayid.package}`, //
          signType: `${this.prepayid.signType}`, // 微信签名方式
          paySign: `${this.prepayid.paySign}` // 微信签名
        },
        res => {
          // alert(JSON.stringify(res))
          // alert(`输入密码后从微信服务器返回来的支付结果：${JSON.stringify(res)}`);
          if (res.err_msg == 'get_brand_wcpay_request:ok') {
            // console.log('res.err_msg', res.err_msg)forder?from=我的&word=我的订单
            var btnArray = ['取消', '确定']
            mui.confirm('请前往我的订单查看！', '提示', btnArray, e => {
              if (e.index == 1) {
                // console.log('000');
                console.log(e.index, '0909')

                this.$router.push({
                  name: 'forder',
                  query: {
                    form: '我的',
                    word: '我的订单'
                  }
                })
              }
            })
          } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
            // this.$router.push({ name: 'payOff', query: { je_sf: this.je_sf, payResult: false, payMessage: '取消支付' } });
            // this.showAlert = true
            // this.alertText = '已取消支付'

            var btnArray = ['取消', '确定']
            mui.confirm('请前往我的订单查看！', '提示', btnArray, e => {
              if (e.index == 1) {
                // console.log('000');
                this.$router.push({
                  name: 'forder',
                  query: {
                    form: '我的',
                    word: '我的订单'
                  }
                })
              }
            })
            // console.log('res.err_msg', res.err_msg)
          } else {
            var btnArray = ['取消', '确定']
            mui.alert('请前往我的订单查看！', '提示', btnArray, e => {
              if (e.index == 1) {
                // console.log('000');
                console.log(e.index, '0909')
                this.$router.push({
                  name: 'forder',
                  query: {
                    form: '我的',
                    word: '我的订单'
                  }
                })
              }
            })
          }
        }
      )
    }
  }
}
</script>

<style scope>
.iconimg {
  height: 20px;
  display: block;
  width: 18px;
  margin: 0 auto;
  margin-bottom: 4px;
}
.cart-bottom {
  position: fixed;
  bottom: 0px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 100%;
}
.detail-ps {
  background: #fff;
  padding: 15px 20px;
  font-size: 16px;
}
</style>
